<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ARIA Enabled Tree</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />

    <style>
        #tree {
        	float:left;
        	margin:20px;
        	border:1px solid #c3daf9;
        }
        .folder .x-tree-node-icon{
    		background:transparent url(../../resources/images/default/tree/folder.gif);
    	}
    	.x-tree-node-expanded .x-tree-node-icon{
    		background:transparent url(../../resources/images/default/tree/folder-open.gif);
    	}        
        .x-a11y-focusframe {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10000000;
            width: 0;
            height: 0;
            font-size: 0;
        }
        .x-a11y-focusframe-side {
            position: absolute;
            font-size: 0;
            overflow: hidden;
        }
        .x-a11y-focusable:focus {
            outline: none
        }
        button.x-a11y-focusable::-moz-focus-inner{border:none}
    </style>
    
    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
    <script type="text/javascript" src="Focus.js"></script>
    <script type="text/javascript" src="ARIA.js"></script>    
    <script type="text/javascript" src="aria-tree.js"></script>
</head>

<body role="">    
    <h1>ARIA Enabled Tree</h1>
    <p>This example shows a TreePanel with ARIA enabled. Download a screenreader like NVDA and navigate to this page
    to test. By default the tree will be focused. Press down to select the root node and start navigating using the arrow keys.</p>
    
    <div id="tree"></div>
</body>
</html>
